<template>
  <div class="headerNav">
    <div class="manage">
      <div class="name"> <span class="el-icon-s-goods"></span> 商场后台管理系统</div>
      <div class="goBack" @click="goBack"> <span class="el-icon-arrow-left"></span></div>
      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="1">处理中心</el-menu-item> 
        <el-submenu index="2">
          <template slot="title">我的工作台</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
          <el-menu-item index="2-3">选项3</el-menu-item>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项1</el-menu-item>
            <el-menu-item index="2-4-2">选项2</el-menu-item>
            <el-menu-item index="2-4-3">选项3</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="3" disabled>消息中心</el-menu-item>
        <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
      </el-menu>
      <div class="title">欢迎进入后台系统！ <span class="logOut" @click="logOut">退出</span></div>
    </div>
  </div>
</template>

<script>
export default {
  name:'headerNav',
  data(){
    return {
      activeIndex: '1',
      activeIndex2: '1'
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    logOut(){
      this.$store.commit('logout')
      this.$router.push({
        path: '/login',
      })
    },
    goBack(){
      this.$route.name == 'home' ? '' : this.$router.go(-1)
    },
  }
}
</script>

<style lang="less">
.headerNav{
  position: fixed;
  z-index: 99;
  .manage{
    position: relative;
    width: 100%;
    .name,.goBack{
      padding: 10px 20px;
      color: white;
      position: absolute;
      z-index: 10;
      line-height: 40px;
      font-size: 20px;
      border-right: 1px solid rgba(255, 255, 255, 0.13);
    }
    .goBack{
      cursor: pointer;
      left: 230px;
      border-right: none;
      font-size: 30px;
    }
    .title{
      position: absolute;
      line-height: 40px;
      color: rgba(255, 255, 255, 0.329);
      padding: 10px 70px;
      font-size: 13px;
      top: 0;
      right: 0;
      z-index: 10;
      .logOut{
        cursor: pointer;
        color: rgba(255, 255, 255, 0.815);  
      }
    }
    .goBack:hover,.logOut:hover{
      color: rgb(255, 208, 75);
    }
    .el-menu-demo{
      padding-left: 300px;
    }
  }
}
</style>